<template>
    <mu-paper :zDepth="2" class="register">
        <el-form ref="form" :model="form" label-width="80px" class="registerForm" size="mini" :rules="rules">
            <el-form-item label="用户名" prop="user">
                <el-input v-model="form.user" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" size="mini"></el-input>
            </el-form-item>
            <!-- <el-form-item label="重复密码" prop="checkPassword">
                 <el-input v-model="form.checkPassword" size="mini" type="password"></el-input>
             </el-form-item>-->
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" size="mini" placeholder="请一定输入真实姓名用于提现"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="form.sex" label="0">男</el-radio>
                <el-radio v-model="form.sex" label="1">女</el-radio>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期"
                                value-format="timestamp" size="mini">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="职业" prop="jobs">
                <el-select v-model="form.jobs" placeholder="职业" size="mini">
                    <el-option
                            v-for="item in jobs"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="微信" prop="wechat">
                <el-input v-model="form.wechat" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
                <el-input v-model="form.qq" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="支付宝" prop="alpay">
                <el-input v-model="form.alpay" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="旺旺" prop="taobao">
                <el-input v-model="form.taobao" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" size="mini"></el-input>
            </el-form-item>


            <el-form-item label="邀请人"  prop="inviter">
                <el-input v-model="form.inviter" size="mini"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align: center">
            <mu-raised-button label="提交" style="width: 80%;" @click="registerUser" primary/>
        </div>
    </mu-paper>
</template>
<script>
    export default {
        name: 'MobileReg',
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                form: {
                    sex: '0',
                    role: '0',
                    teacher: '',
                    jobs: '',
                },
                jobs: ['学生', '自由职业', '待业', '家庭主妇', '工薪族', '务农', '管理人才', '技术人才', '工人', '宝妈', '销售', '客服', '工程', '个体户', '会计', '文员', '检验员', '其他'],
                rules: {
                    user: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                    ],
                    checkPassword: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'},
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    birthday: [
                        {required: true, message: '请选择出生日期', trigger: 'blur'},
                    ],
                    jobs: [
                        {required: true, message: '请选择职业', trigger: 'blur'},
                    ],
                    wechat: [
                        {required: true, message: '请输入微信', trigger: 'blur'},
                    ],
                    qq: [
                        {required: true, message: '请输入QQ', trigger: 'blur'},
                    ],
                    alpay: [
                        {required: true, message: '请输入支付宝', trigger: 'blur'},
                    ],
                    taobao: [
                        {required: true, message: '请输入旺旺', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {len: 11, message: '请输入正确的手机号', trigger: 'blur'}
                    ],
                    teacher: [
                        {required: true, message: '请输入师傅代号', trigger: 'blur'},
                    ],
                    inviter:[
                        {required: true, message: '请输入邀请人', trigger: 'blur'},
                    ]
                },
                disabledRole: true,
                disabledTeacher: true,
            }
        },
        methods: {
            registerUser() {
                let _this = this;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        _this.$axios.post("/api/tourist.php", {
                            id: "register",
                            data: JSON.stringify(_this.form),
                        }).then(function (response) {
                            if (response.data.status === "success") {
                                _this.$confirm('注册成功前往绑定页面', '提示', {
                                    confirmButtonText: '确定',
                                    type: 'success',
                                    customClass: 'custom',
                                    showCancelButton: false
                                }).then(() => {
                                    _this.$router.push('/binding/login')
                                });
                            } else {
                                _this.$message({
                                    message: response.data.msg,
                                    type: response.data.status
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });

            }
        },
        mounted() {
            if (this.$route.query.teacher) {
                this.form.role = '0';
                this.form.teacher = this.$route.query.teacher;

            } else {
                this.disabledRole = false;
                this.disabledTeacher = false;
            }
            document.title = "注册";
        }
    }
</script>
<style>
    .register {
        min-height: 100%;
        padding: 20px 15px;
    }

    .registerForm {
        margin-right: 15px;
        width: 300px;
    }

    .custom {
        width: auto;
    }
</style>
